<template>
	<view class="imageList">
	  <view v-for="(item,index) in imageList" class="imageItem" :key="item.src">
	    <image :src="item.src" mode="aspectFit" @click="previewImage(item)"></image>
	    <text class="iconfont icon-chacha" @click="removeImage(index)"></text>
	  </view>
	  <view v-if="imageList.length<3" class="imageItem" @click="chooseImageTap">
	    <text class="iconfont icon-jia"></text>
	  </view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	export default{
		props:{
			 imageList:Array
		},
		data(){
			return {}
		},
		methods:{
			chooseImageTap(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
				    success: (chooseImageRes) => {
				        // const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$H.imageUpload(api.imageUpload,chooseImageRes.tempFilePaths[0]).then(res=>{
							console.log('图片上传',res)
							this.imageList.push({ src: chooseImageRes.tempFilePaths[0], path: res.content})
						})
				     
				    }
				});
			},
			removeImage(index){
				this.$H.get(api.deleteImage,{path:this.imageList[index].path}).then(res=>{
					this.imageList.splice(index,1)
				})
			},
			previewImage(item){
				uni.previewImage({
					urls:[item.src]
				})
			}
		}
	}
</script>

<style scoped>
	.imageList{
	  display: flex;
	  margin-top:20rpx;
	}
	.imageList .imageItem{
	  width:200rpx;
	  height:200rpx;
	  line-height: 200rpx;
	  text-align: center;
	  border:1px solid #c9bebe;
	  border-radius: 8rpx;
	  border-bottom-left-radius: 0;
	  border-top-right-radius: 0;
	  margin-right:40rpx;
	  position: relative;
	}
	.imageList .imageItem .icon-chacha{
	  position: absolute;
	  top:0;
	  right:-10rpx;
	  line-height:0;
	  font-size:38rpx;
	  color:#c9bebe;
	}
	.imageList .imageItem image{
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	.imageList .imageItem .icon-jia{
	   font-size: 60rpx;
	   color:#c9bebe;
	}
</style>
